﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CustomersOnMap.aspx.cs" Inherits="Agents.Agent.CustomersOnMap" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
	<!--The viewport meta tag is used to improve the presentation and behavior of the samples 
	  on iOS devices-->
	<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>

	<title>מערכת סוכנים</title>
	<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">
	<link href="../Styles/SiteMaster.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.4"></script>
	<script type="text/javascript" src="../Scripts/Common.js"></script>

	<script type="text/javascript">
		
		dojo.require("esri.map");
		dojo.require("esri.layers.agstiled");
		dojo.require("esri.toolbars.draw");

		var map, tb;
		var locator;
		var extentToZomm;
		var point;

		function init() {

			esri.config.defaults.io.proxyUrl = "/proxy/proxy.ashx";

			final=0;
			map = new esri.Map("map");

			dojo.connect(map, "onLoad", function() {
				map.infoWindow.setFixedAnchor(esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT);
			});

			map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://www10.emap.co.il/ArcGIS/rest/services/eMap_vector_2010/MapServer"));
			dojo.connect(map, "onLoad", initToolbar);
			locator = new esri.tasks.Locator("http://www10.emap.co.il/ArcGIS/rest/services/eMapComposite/GeocodeServer");
			
			map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://www10.emap.co.il/ArcGIS/rest/services/eMap_vector_2010/MapServer"));
			
			// Create Point Collection.
			extentToZomm = new esri.geometry.Multipoint(new esri.SpatialReference({ wkid: 4326 }));
		}
		function initToolbar(map) {
			addXY();
			tb = new esri.toolbars.Draw(map);
			dojo.connect(tb, "onDrawEnd", addGraphic);
		}

		function addXY() {

			
			//array for holding all addresses in database.
			var add = new Array();
			//array for holding the coordinates in database.
			var xc= new Array();
			var yc= new Array();
			//array for holding priorities of clientes.
			var pri= new Array();
			//array for holding telephone numbers of clients.
			var tel= new Array();
			//array for holding date of last order for each client.
			var last= new Array();
			//array for holding the names of the clients
			var name= new Array();

			<%
			//This is pure server side area
			for(int i=0;i<size;i++)
			 {
			%>
			add[<%=i%>] = '<%=Locations[i]%>';
			xc[<%=i%>] = '<%=xCords[i]%>';
			yc[<%=i%>] = '<%=yCords[i]%>';
			pri[<%=i%>] = '<%=priority[i]%>';
			tel[<%=i%>] = '<%=telephones[i]%>';
			last[<%=i%>] = '<%=dates[i]%>';
			name[<%=i%>] = '<%=names[i]%>';
			<%
			} 
			%>
		   length= '<%=size%>';
		   var from= '<%=agentAt%>';
		   
		   
		   var fromArr = from.split(","), fromAddress = { City: fromArr[0], Street: fromArr[1], House: fromArr[2] };

		   i = 0;

		   // Locate the agent
		   locator.addressToLocations(fromAddress, ["Loc_name"], 
			function(addressResults) 
			{ 
				// Add the agent's x and y location to the hidden fields
				document.getElementById('hiddenLocationX').value = 
											addressResults[0].location.x;
				document.getElementById('hiddenLocationY').value = 
											addressResults[0].location.y;

				// Show the agent on the map
				Results(addressResults);

				// Update the page to show notifications
				if (document.getElementById('updatedAgentLocation').value == 'false') {
					form1.submit();
				}
			} );
 
			
			for (i = 0; i < length; i++) {

				// Create the second point, circle
				var point2 = new esri.geometry.Point({ "x": xc[i], "y": yc[i], 
														" spatialReference": { " wkid": 4326} });
				var sym2;
			
				if(pri[i]=="-1")
					sym2= new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255, 255, 255]));
				if(pri[i]=="1")
					sym2= new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0, 255, 0]));
				if(pri[i]=="2")
					sym2= new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0, 230, 0]));
				if(pri[i]=="3")
					sym2= new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0,200 , 0]));
				if(pri[i]=="4")
					sym2= new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0, 180, 0]));
				if(pri[i]=="5")
					sym2= new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0, 150, 0]));
				if(pri[i]=="6")
					sym2= new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0,120, 0]));
				if(pri[i]=="7")
					sym2= new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0, 100, 0]));
				if(pri[i]=="8")
					sym2= new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0, 80, 0]));
				if(pri[i]=="9")
					sym2= new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0, 50, 0]));
				if(pri[i]=="10")
					sym2= new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0, 25, 0]));

				var graphic2 = new esri.Graphic(point2, sym2);
			
				var infoTemplate = new esri.InfoTemplate();
				infoTemplate.setContent( "<div class='infowindow'><b>פרטי לקוח:</b><br/>"
								 + "<b>שם: </b>" + name[i] + "<br/>"
								 + "<b>כתובת: </b>" + add[i] + "<br/>"
								 + "<b>מספר טלפון: </b>" + tel[i] + "<br/>"
								 + "<b>הזמנה אחרונה: </b>" + last[i] + "</div>");
			
				graphic2.setInfoTemplate(infoTemplate);
				map.graphics.add(graphic2);

				// Show customer info on mouse over
				dojo.connect(map.graphics, "onMouseMove", function(evt) {
				  var g = evt.graphic;

				  if (g.getContent() != undefined) {
					  map.infoWindow.setContent(g.getContent());
					  map.infoWindow.setTitle(g.getTitle());
					  map.infoWindow.resize(200, 120);
					  map.infoWindow.show(evt.screenPoint,
							map.getInfoWindowAnchor(evt.screenPoint));
				  }
				});
			
				dojo.connect(map.graphics, "onMouseOut", function() {map.infoWindow.hide();} );
			}
		
			// Zoom to the extent with all the points.
			map.setExtent(extentToZomm.getExtent(), true);
		}

	  function Results(addressResults) {
		
			var geom = addressResults[0].location;
			//dojo.byId("empty").innerHTML = geom.y;
			point = new esri.geometry.Point({ "x": geom.x, "y": geom.y, " spatialReference": { " wkid": 4326} });
			var sym =  new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255, 0, 0]));
			var graphic = new esri.Graphic(point, sym);
			
			map.graphics.add(graphic);

			// Add point to the collection
			extentToZomm.addPoint(point);  
	  }

		// Change to orthp map.
		function ChangeToOrtho() {
			// Ortho
			var mapUrl = 'http://www10.emap.co.il/ArcGIS/rest/services/eMap_Ortho_2010/MapServer';

			map.removeAllLayers();
			map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer(mapUrl));
		}
		// Change to vector map.
		function ChangeToVector() {
			var mapUrl = 'http://www10.emap.co.il/ArcGIS/rest/services/eMap_vector_2010/MapServer';

			map.removeAllLayers();

			map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer(mapUrl));
		}
		// Change to hybrid map.
		function ChangeToHybrid() {
			// Hybrid you need to add them both to the map
			var mapUrl = 'http://www10.emap.co.il/ArcGIS/rest/services/eMap_Ortho_2010/MapServer';
			var mapUrl2 = 'http://www10.emap.co.il/ArcGIS/rest/services/eMap_Hybrid_Heb_2010/MapServer';

			map.removeAllLayers();

			map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer(mapUrl));
			map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer(mapUrl2));

		}
		// Zoom in the map.
		function zoomIn() {
			if (map.getLevel() != 10) {
				map.setLevel(map.getLevel() + 1);
			}
		}
		// Zoom Out
		function zoomOut() {
			if (map.getLevel() != 0) {
				map.setLevel(map.getLevel() - 1);
			}
		}


		dojo.addOnLoad(init);
</script>
</head>
<body>
	<form id="form1" runat="server">
		<asp:HiddenField runat="server" id="hiddenLocationX" />
		<asp:HiddenField runat="server" id="hiddenLocationY" />
		<asp:HiddenField runat="server" id="updatedAgentLocation" value="false" />

		<table border="0" width="775px">
		<tr class="header">
			<td colspan="2">
				<asp:Image ID="Image1" runat="server" ImageUrl="~/images/background.jpg" />
			</td>
		</tr>
		<tr class="mainContent" class="alignCenter">
			<td width="100%" bgcolor="white">
				<table class="alignCenter">
					<tr>
						<td>
							<div dojoType="dijit.layout.ContentPane" class="alignCenter" 
								style="width:700px; height:500; border:2px solid #000;" region="center" id="map"/>
						</td>
					</tr>
					<tr>
						<td>
							<input type="button" class="button" id="btnChangeMap" value="מפה" onclick="ChangeToVector();"/>
							<input type="button" class="button" id="btnChangeMap" value="לוויין" onclick="ChangeToOrtho();"/>
							<input type="button" class="button" id="btnChangeMap" value="מפה ולוויין" onclick="ChangeToHybrid();"/>
							<asp:Label ID="empty" runat="server" />
						</td>
					</tr>
					<tr>
						<td>
							<hr />
						</td>
					</tr>
					<tr>
						<td>
							<asp:Button ID="backBtn" Text="חזור" runat="server" onclick="backBtn_Click" CssClass="button" />                            
						</td>
					</tr>
				</table>
			</td>
		</tr>
		<tr style="position: absolute; bottom: 0 !important; height:20px;">
			<td colspan="2" class="footer"/>
		</tr>
		</table>
	</form>
</body>
</html>